<template>
  <el-form label-width="120px">
    <el-form-item label="课程标题">
      <el-input
        v-model="courseInfo.title"
        placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"
      />
    </el-form-item>

    <!-- 所属分类 TODO -->
    <!-- 所属分类 TODO -->
    <el-form-item label="课程分类">
      <el-select placeholder="一级分类">
        <el-option />
      </el-select>

      <!-- 二级分类 -->
      <el-select placeholder="二级分类" style="margin-left: 5px">
        <el-option />
      </el-select>
    </el-form-item>

    <!-- 课程讲师 TODO -->
    <el-form-item label="课程讲师">
      <el-select placeholder="请选择">
        <el-option />
      </el-select>
    </el-form-item>
    <!-- 总课时 -->
    <el-form-item label="总课时">
      <el-input-number v-model="courseInfo.lesson_num" />
    </el-form-item>

    <!-- 课程简介 TODO -->
    <!-- 课程简介-->
    <el-form-item label="课程简介"></el-form-item>

    <!-- 课程封面 TODO -->
    <el-form-item label="课程封面">
      <el-upload></el-upload>
    </el-form-item>

    <el-form-item label="课程价格">
      <el-input-number v-model="courseInfo.price" />元
    </el-form-item>

    <el-form-item style="margin-top: 30px">
      <el-button
        :disabled="saveBtnDisabled"
        type="primary"
        @click="saveAndNext($parent)"
        >保存并下一步</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { saveCourseInfo } from '@/api/course/index'

//按钮是否禁用，默认不禁用
let saveBtnDisabled = ref(false)
//收集账号密码的数据
let courseInfo = reactive({ title: '', lesson_num: 0, price: 0 })

//保存并下一步方法
const saveAndNext = ($parent: any) => {
  //saveBtnDisabled.value = true
  $parent.$parent.active = 1
  //课程基本信息
  saveData($parent)
}

//保存数据方法
const saveData = async ($parent: any) => {
  let res = await saveCourseInfo(courseInfo)
  console.log(res.data.id)
  $parent.courseId = res.data.id
  $parent.$parent.active = 1
}
</script>

<style scoped></style>
